<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
    });
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        var xData = []; //X轴数据
        var yData = []; //Y轴数据
        //循环赋值
        for (let i in this.data) {
          xData.push(this.data[i].name);
          yData.push(this.data[i].value);
        }
        let option = (option = {
          // backgroundColor: "#00043A",
          tooltip: {
            trigger: "axis",
            show: true,
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            show: false,
          },
          grid: {
            left: "3%",
            right: "10%",
            bottom: "3%",
            containLabel: true,
            width: "86%",
          },
          xAxis: [
            {
              splitLine: {
                show: false,
              },
              type: "value",
              show: false,
            },
          ],
          yAxis: [
            {
              splitLine: {
                show: false,
              },
              axisLine: {
                //y轴
                show: false,
              },
              type: "category",
              axisTick: {
                show: false,
              },
              inverse: true,
              data: xData,
              axisLabel: {
                color: this.json.theme.echartsBackgroundColor[0],
                fontSize: 14,
              },
            },
          ],
          series: [
            {
              name: "",
              type: "bar",
              barWidth: 12, // 柱子宽度
              label: {
                show: true,
                position: "right", // 位置
                color: this.json.theme.echartsBackgroundColor[6],
                fontSize: 14,
                distance: 15, // 距离
                formatter: "{c}", // 这里是数据展示的时候显示的数据
                // formatter: "{c} 万公里", // 这里是数据展示的时候显示的数据
              }, // 柱子上方的数值
              itemStyle: {
                barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

                color: new this.$echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: this.json.theme.echartsBackgroundColor[0],
                    },
                    {
                      offset: 1,
                      color: this.json.theme.echartsBackgroundColor[4],
                    },
                  ],
                  false
                ), // 渐变
              },
              data: yData,
            },
          ],
        });
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>>
